<form [formGroup]="formGroup" class="form-container" novalidate autocomplete="off">
<mat-grid-list cols="10" rowHeight="40px">
  <mat-grid-tile colspan="1" class="wdl-grid-first-label">
    <label>{{"building" | translate}}:</label>
  </mat-grid-tile>

  <mat-grid-tile colspan="3">
    <mat-form-field class="building-selection">
      <mat-select formControlName="building" (selectionChange)="buildingChanges($event)">
        <mat-option *ngFor="let building of buildings" [value]="building.id">{{building.buildingName}}</mat-option>
      </mat-select>
    </mat-form-field>
  </mat-grid-tile>

  <mat-grid-tile colspan="1" class="wdl-grid-label">
    <label class="monitor-label">{{"level" | translate}}:</label>
  </mat-grid-tile>
  <mat-grid-tile colspan="1">
    <mat-form-field class="level-selection">
      <mat-select formControlName="level" (selectionChange)="levelChanges($event)">
        <mat-option *ngFor="let level of levels" [value]="level.id">{{level.levelName}}</mat-option>
      </mat-select>
    </mat-form-field>
  </mat-grid-tile>

  <mat-grid-tile colspan="1" class="wdl-grid-label">
    <label class="monitor-label">{{"room" | translate}}:</label>
  </mat-grid-tile>
  <mat-grid-tile colspan="1">
    <mat-form-field class="room-selection">
      <mat-select formControlName="room" (selectionChange)="roomChanges($event)">
        <mat-option *ngFor="let room of rooms" [value]="room.id">{{room.roomName}}</mat-option>
      </mat-select>
    </mat-form-field>
  </mat-grid-tile>

  <mat-grid-tile colspan="1" class="wdl-grid-label">
    <label class="monitor-label">{{"bed" | translate}}:</label>
  </mat-grid-tile>
  <mat-grid-tile colspan="1">
    <mat-form-field class="bed-selection">
      <mat-select formControlName="bed" (selectionChange)="bedSelected($event)">
        <mat-option *ngFor="let bed of beds" [value]="bed.id">{{bed.bedName}}</mat-option>
      </mat-select>
    </mat-form-field>
  </mat-grid-tile>
</mat-grid-list>
</form>